<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="user-scalable=0, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="images/icon.png" rel="apple-touch-icon" />

    <link href='http://fonts.googleapis.com/css?family=Knewave' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="game.js"></script>
</head>
<body>
<section id="menu" class="page end">
    <figure id="btn-start-game" data-activatable="true" class="button">
        <div data-text="start-game"></div>
    </figure>
    <figure id="btn-options" data-activatable="true" class="button">
        <div data-text="options"></div>
    </figure>
</section>
<section id="options" class="page">
    <header>
        <figure id="btn-back-menu" data-activatable="true" class="button circle">
            <div data-text="back"></div>
        </figure>
    </header>
    <div class="center">
        <figure id="btn-melody" data-activatable="true" class="button small">
            <div data-text="melody"></div>
        </figure>
        <figure id="btn-sound" data-activatable="true" class="button small">
            <div data-text="sound"></div>
        </figure>
    </div>
    <figure id="btn-language" class="button">
        <div data-text="language"></div>
    </figure>
    <figure id="btn-reset-game" class="button">
        <div data-text="reset-game"></div>
    </figure>
</section>
<section id="pause" class="page over">
    <figure id="btn-continue" data-activatable="true" class="button">
        <div data-text="continue"></div>
    </figure>
    <figure id="btn-skip-level" data-activatable="true" class="button">
        <div data-text="skip-level"></div>
    </figure>
    <figure id="btn-level-select" data-activatable="true" class="button">
        <div data-text="level-select"></div>
    </figure>
    <figure id="btn-main-menu" data-activatable="true" class="button">
        <div data-text="main-menu"></div>
    </figure>
</section>
<section id="end" class="page end">
    <div class="content">
        <div class="results" data-value="1"></div>
    </div>
    <div class="center">
        <figure id="btn-replay" data-activatable="true" class="button small">
            <div data-text="replay"></div>
        </figure>
        <figure id="btn-next" data-activatable="true" class="button small">
            <div data-text="next"></div>
        </figure>
    </div>
    <figure id="btn-main" data-activatable="true" class="button">
        <div data-text="main-menu"></div>
    </figure>
</section>

<section id="game" class="page">
    <header class="end">
        <figure class="action" data-activatable="true"></figure>
        <figure id="btn-pause" data-activatable="true" class="button circle">
            <div data-text="pause"></div>
        </figure>
    </header>
    <canvas id="demoCanvas"></canvas>
</section>
<script type="text/javascript" src="start.js"></script>
</body>
</html>